<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="../Vue.js"></script>
    <script>
      const MyPlugin = new Vue({});
      // 创建插件
      MyPlugin.install = function (Vue, options) {
        // 1. 添加全局方法或 property
        Vue.myGlobalMethod = function () {
          // 逻辑...
          console.log("myGlobalMethod");
        };
        Vue.abc = 10;

        // 2. 添加全局资源
        Vue.directive("my-directive", {
          bind(el, binding, vnode, oldVnode) {
            // 逻辑...
          },
        });

        // 3. 注入组件选项
        Vue.mixin({
          data() {
            return {
              a: 3,
            };
          },
          created: function () {
            // 逻辑...
          },
        });

        // 4. 添加实例方法
        Vue.prototype.$myMethod = function (methodOptions) {
          // 逻辑...
          console.log("myMethod");
        };
        Vue.prototype.$x = "一刀9999, 系兄弟，就来砍我，我系渣渣辉";
      };

      // 使用插件
      Vue.use(MyPlugin);

      new Vue({
        el: "#app",
        data: {},
        mounted() {
          Vue.myGlobalMethod();
          console.log(Vue.abc);
          this.$myMethod();
          console.log(this.$x);
        },
      });
    </script>
  </body>
</html>
